<template>
	<el-card>
		<div>
			<schart canvasId="canvas" :options="canvasOptions"/>
			
		</div>
		<el-form ref="elForm" :model="formData" size="medium" label-width="100px" :rules="rules">
			
			<el-col :span="12">
				<el-form-item label="日期" prop="date">
					<el-cascader v-model="formData.date1" :options="dateOptions" :props="dateProps" :style="{width: '100%'}"
						 clearable></el-cascader>
				</el-form-item>
			</el-col>
			
			<el-col :span="12">
				<el-form-item label="时间段" prop="time">
					<el-cascader v-model="formData.time" :options="timeOptions" :props="timeProps" :style="{width: '100%'}"
						 clearable></el-cascader>
				</el-form-item>
			</el-col>
			
			<el-col :span="12">
				<el-form-item size="large">
					<el-button type="primary" @click="submitForm()">查询</el-button>
					<el-button @click="resetForm()">重置</el-button>
				</el-form-item>
			</el-col>
		</el-form>
	</el-card>
</template>


<script>
	import Schart from 'vue-schart'
	import{
		chart
	}from '../../../api/system.js'
	export default {
		name: "Charts",
		components: {
			Schart,
		},
		data() {
			return {
				canvasOptions: {
					type: "pie",
					title: {
						text: "教室申请情况饼状图",
					},
					legend: {
						position: "left",
					},
					radius:50,
					bgColor: "#fbfbfb",
					labels: ["已申请教室", "剩余教室"],
					// colorList: ["", "", "", ""],
					datasets: [{
						data: [0, 1],
					}],
				},
				formData:{
					date:'',
					date1:[],
					time:[],
					time1:'time1',
				},
				timeOptions: [{
						name: '7：50-9：30',
						id: '1'
					},
					{
						name: '9：40-11：20',
						id: '2'
					},
					{
						name: '13：30-15：10',
						id: '3'
					},
					{
						name: '15：20-17：00',
						id: '4'
					},
					{
						name: '18：00-19：40',
						id: '5'
					},
					{
						name: '19：50-21：30',
						id: '6'
					},
				],
				timeProps: {
					"label": "name",
					"value": "id",
					"children": "children"
				},
				dateOptions: [{
						name: '',
						id: '1'
					},
					{
						name: '',
						id: '2'
					},
					{
						name: '',
						id: '3'
					}
				],
				dateProps: {
					"label": "name",
					"value": "id",
					"children": "children"
				},
				rules: {
				
					date: [{
						required: true,
						message: '请输入查询日期',
						trigger: 'blur',
					}],
					time: [{
						required: true,
						message: '请输入查询时间段',
						trigger: 'blur',
					}],
				
				},
			}
			

		},
		methods:{
			submitForm(){
				this.$refs['elForm'].validate(valid => {
					if (!valid) return
					// TODO 提交表单
					this.formData.time1 = 'time'+this.formData.time[0];
					this.formData.date = this.dateOptions[this.formData.date1[0]-1].name;
					console.log(this.formData.date);
					this.query(this.formData.date,this.formData.time1);
				})
			},
			resetForm(){
				this.$refs['elForm'].resetFields();
			},
			computeDate() {
				let d = new Date();
				this.dateOptions[0].name = (d.getMonth() + 1) + '月' + (d.getDate() + 1) + '日';
				this.dateOptions[1].name = (d.getMonth() + 1) + '月' + (d.getDate() + 2) + '日';
				this.dateOptions[2].name = (d.getMonth() + 1) + '月' + (d.getDate() + 3) + '日';
				this.formData.date = this.dateOptions[0].name;
				console.log(this.formData.date);
				this.query(this.formData.date,this.formData.time1);
			},
			query(date,time){
				
				chart(date,time).then(res=>{
					let arr = [res.data1,res.data2];
					this.canvasOptions.datasets[0].data = arr;
					console.log(res);
				})
			}
		},
		created() {
			this.computeDate();
		}
	}
</script>

<style scoped>
	.myCanvas {
		height: auto;
	}
</style>
